<!-- vue文件的三种标签 
    template: 编写html代码
    script:   编写TS或JS代码
    style:    编写样式代码
 -->

<template>
    <!-- 使用v-if控制Person组件的挂载和销毁 -->
  <Person v-if="isShow"/>
  <button @click="close">显隐Person</button>
</template>

<script lang="ts" setup>
    import Person from './components/Person.vue'
   

    console.log('父-创建完毕!')

    // 挂载阶段
    import {ref, onBeforeMount, onMounted } from 'vue';
    onBeforeMount(()=>{
        console.log("父-挂载前")
    })

    onMounted(()=>{
        console.log("父-挂载后")
    })

    let isShow = ref(true);

    function close() {
        isShow.value = !isShow.value
    }

</script>
